<!--
 * @Author: xiaxia
 * @Description: 
 * @Date: 2023-09-12 17:59:04
 * @LastEditTime: 2024-06-03 14:29:21
 * @FilePath: \vue-admin-template\src\common\module\showInfo.vue
-->
<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <el-button
        type="text"
        plain
        :icon="showInfo ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" 
        @click="handShow()"
      >{{showInfo ? '收起更多' : '查看更多'}}
      </el-button>
    </div>
    <!-- 内容 -->
    <div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    showInfo: {
      type: Boolean,
      default: false,
    },
  },
  methods:{
    handShow() {
      this.$emit("update:showInfo", !this.showInfo);
    }
  }
}
</script>

<style lang="scss" scoped>
  .header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;

    .title{
      font-size: 17px;
      font-weight: 700;
    }
  }
</style>